<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts';
import { queryStockPlateUpData } from '@/api/stockApi'

const dateValue = ref('')

// echarts 数据
const option = ref({
  title: {
    text: '板块涨停统计'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['高兴发展', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '高兴发展',
      type: 'line',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
})

/**
 * 获取当前月份的第一天（不包含时间）
 */
const getCurrentDate = () => {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，所以需要加 1
  return `${year}${month}01`
}

/**
 * 时间选择器事件
 */
const dateDoChange = async () => {
  const selectDate = `${dateValue.value}01`;
  await echartsInit(selectDate);
}

onMounted(async () => {
  const currentDate = getCurrentDate();
  await echartsInit(currentDate);
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 绘制图表
  myChart.setOption(option.value);
})


/**
 * echarts 图表初始化
 * @param date 
 */
const echartsInit = async (date: string) => {
  console.log('date', date);

  // 请求板块涨停数据
  const res = await queryStockPlateUpData(date);
  console.log('res', res);
  // 设置 option 对象的数据
  option.value.xAxis.data = res.data.dateList;
  option.value.legend.data = res.data.plateNameList;
  option.value.series = res.data.plateDataList;
}

</script>

<template>

  <div class="picker-class">
    <el-date-picker value-format="YYYYMM" v-model="dateValue" type="month" placeholder="选择时间" @change="dateDoChange" />
  </div>

  <!-- <div class="head-class">
    <el-button type="primary">板块涨停数量统计</el-button>
    <el-button type="primary">个股涨停列表</el-button>
  </div> -->

  <!-- echarts -->
  <div class="body-class">
    <div id="main"></div>
    <RouterView></RouterView>
  </div>

</template>

<style scoped>
#main {
  height: 580px;
  width: 1300px;
  margin-top: 20px;
}

.body-class {
  height: 580px;
  width: 1300px;
  margin-top: 20px;
}

.picker-class {
  margin-top: 20px;
}
</style>
